<template>
  <el-dialog
    class="public-dialog"
    title="详情"
    width="80%"
    :modelValue="modelValue"
    @close="handleClose"
    draggable
    align-center
    destroy-on-close
  >
    <div class="h-[700px]">
      <baseInfo :data="formvalue" ref="baseRef" />
      <detail-info :data="formvalue" />
    </div>
    <template #footer>
      <div class="dialog-button">
        <el-button :disabled="loading" @click="handleClose(false)">
          {{ disabled ? "关闭" : "取消" }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import baseInfo from "./baseInfo/index.vue";
import detailInfo from "../add/detailInfo/index.vue";
import { detailLogisticsPayOrder } from "../api/index";
const formvalue = ref({ id: null });
const props = defineProps({
  id: { type: [Number, String], default: "" },
  logistics_pay_number: { type: [Number, String], default: "" },
  modelValue: { type: Boolean, default: false },
  optionsData: { type: Object, default: () => ({}) },
});
const { id, logistics_pay_number } = toRefs(props);
const disabled = ref(false)
const loading = ref(false)
const emit = defineEmits(["update:modelValue", "close", "refresh"]);
watch(
  () => id.value,
  (val) => {
    if (val) {
      getDetail();
    }
  }
);
watch(
  () => logistics_pay_number.value,
  (val) => {
    if (val) {
      getDetail();
    }
  }
);
const getDetail = () => {
  detailLogisticsPayOrder({
    id: id.value || undefined,
    logistics_pay_number: logistics_pay_number.value || undefined,
  }).then((res) => {
    if (res?.data?.exchange_rate) {
      let data = res.data.exchange_rate;
      res.data.exchange_rate = Number(data).toFixed(4);
    }
    formvalue.value = res?.data || {};
  });
};

const handleClose = async (refresh) => {
  formvalue.value = {};
  await nextTick();
  emit("update:modelValue", false);
  emit("close");
  if (refresh) emit("refresh");
};
</script>

<style lang="scss" scoped></style>
